<template>
    <a-upload
            v-model:file-list="fileList"
            name="audio"
            action="http://localhost:3000/process-audio"
            :custom-request="handleUpload"
            :data="{startTime:1,endTime:10}"
    >
        <a-button>
            <upload-outlined></upload-outlined>
            Click to Upload
        </a-button>
    </a-upload>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import type {UploadChangeParam} from 'ant-design-vue';
import {message} from 'ant-design-vue';
import {UploadOutlined} from '@ant-design/icons-vue';
import axios from "axios";

const downloadFileByString = async (str) => {
    try {
// 创建一个 TextEncoder 实例
        const encoder = new TextEncoder();
// 使用 TextEncoder 将字符串编码为 Uint8Array
        const uint8Array = encoder.encode(str);
// 从 Uint8Array 获取 ArrayBuffer
        const arrayBuffer = uint8Array.buffer;
        // 将 ArrayBuffer 转换为 Blob 对象
        const blob = new Blob([arrayBuffer], {type: 'application/octet-stream'});
        // 下载的文件名
        const fileName = 'downloaded-audio.mp3';
        // 创建一个 <a> 元素
        const a = document.createElement('a');
        // 创建一个临时的 URL 指向 Blob 对象
        const url = URL.createObjectURL(blob);
        // 设置 href 属性为临时 URL
        a.href = url;
        // 设置 download 属性为文件名
        a.download = fileName;
        // 模拟点击 <a> 元素
        a.click();

        // 释放临时 URL 以避免内存泄漏
        URL.revokeObjectURL(url);
    } catch (error) {
        console.error('下载文件时出错:', error);
    }
}

const downloadBlobFile = async (blob) => {
    try {
        // 将响应数据转换为 ArrayBuffer
        // const arrayBuffer = await response.arrayBuffer();
        // // 将 ArrayBuffer 转换为 Blob 对象
        // const blob = new Blob([arrayBuffer], {type: 'application/octet-stream'});
        // 下载的文件名
        const fileName = 'downloaded-audio.mp3';
        // 创建一个 <a> 元素
        const a = document.createElement('a');
        // 创建一个临时的 URL 指向 Blob 对象
        const url = URL.createObjectURL(blob);
        // 设置 href 属性为临时 URL
        a.href = url;
        // 设置 download 属性为文件名
        a.download = fileName;
        // 模拟点击 <a> 元素
        a.click();

        // 释放临时 URL 以避免内存泄漏
        URL.revokeObjectURL(url);
    } catch (error) {
        console.error('下载文件时出错:', error);
    }
};
const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
        console.log(info);
        // 触发下载
        downloadFileByString(info.file.response)

    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};

const handleUpload = (options) => {
    const {file, onProgress, onSuccess, onError, action} = options
    console.log(options)

    const formData = new FormData();
    formData.append('audio', file);
    formData.append('startTime', '1');
    formData.append('endTime', '10');

    axios.post(action, formData, {responseType: 'blob'})
        .then(function (response) {
            console.log(response);
            downloadBlobFile(response.data)
        })
        .catch(function (error) {
            console.log(error);
        });
}


const fileList = ref([]);
const headers = {
    authorization: 'authorization-text',
};
</script>

